<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一次性渲染十万条数据</title>
</head>
<body>
    <ul id="app"></ul>
    <script>
        let ul = document.getElementById('app')
        // 数据总条数
        let total = 1000000
        // 一次性插入条数
        let once = 20
        // 总页数
        let page = Math.round(total / once)
        // 当前索引
        let index = 0
        // 循环加载数据
        function loop(curTotal, curIndex){
            if(curTotal <= 0) return false
            window.requestAnimationFrame(() => {
                // 每页多少条，最后一次可能比一次性加载(once)的条数少
                let pageCount = Math.min(curTotal, once)
                for(let i = 0;i < pageCount;i++) {
                    let li = document.createElement('li')
                    li.innerText = curIndex + i + ' : '  + ~~(Math.random() * total)
                    ul.appendChild(li)
                }
                loop(curTotal - pageCount, curIndex + pageCount)
            })
        }
        loop(total,index)
    </script>
</body>
</html>